<template>
  <!-- @touchmove.stop.prevent用于阻止touchmove冒泡，避免键盘弹出后触摸底部输入框区域还可以往上滚动的问题 -->
  <view class="chat-input-bar-container" @touchmove.stop.prevent :style="{ marginBottom: keyboardVisible ? bottomOffset : '0px' }">
    <!-- 币种快捷按钮 - 只在点击热门山寨后显示 -->
     <!-- v-if="showCoinSelector" -->
    <view class="period-shortcuts"  @touchmove.stop>
      <!-- 可选的标题头部 -->
      <!-- <view class="shortcuts-header" v-if="showSelectorHeader">
        <text class="shortcuts-title">选择热门山寨币种</text>
        <view class="close-selector" @click="closeCoinSelector">
          <uv-icon name="close" size="24" color="#999"></uv-icon>
        </view>
      </view> -->
      <!-- 简化版：只显示关闭按钮 -->
      <!-- <view class="shortcuts-header-simple" v-else>
        <view class="close-selector-simple" @click="closeCoinSelector">
          <uv-icon name="close" size="20" color="#999"></uv-icon>
        </view>
      </view> -->
      <scroll-view class="shortcuts-scroll" scroll-x :show-scrollbar="false">
        <view class="shortcuts-grid">
          <view
            v-for="period in periodOptions"
            :key="period.key"
            class="shortcut-btn"
            @click="selectPeriod(period)"
          >
            <text class="shortcut-text">{{ period.label }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 输入区域 -->
    <view class="input-area" :style="{ paddingBottom: inputAreaPaddingBottom }">
      <input
        v-model="msg"
        :focus="focus"
        class="message-input"
        placeholder="请输入..."
        placeholder-class="input-placeholder"
        :disabled="disabled"
        :adjust-position="false"
        :hold-keyboard="false"
        confirm-type="send"
        type="text"
        @confirm="sendClick"
        @focus="onInputFocus"
        @blur="onInputBlur"
      />
      <view
        class="send-btn"
        :class="{ disabled: !sendEnabled }"
        @click="sendClick"
      >
        <text class="send-text">发送</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ChatInput',
  props: {
    // 是否禁用输入
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示币种选择器
    showCoinSelector: {
      type: Boolean,
      default: false
    },
    // 币种选项
    periodOptions: {
      type: Array,
      default: () => []
    },
    // 是否显示币种选择器的标题
    showSelectorHeader: {
      type: Boolean,
      default: true
    },
    // 是否是VIP用户
    isVip: {
      type: Boolean,
      default: false
    },
    // 非VIP用户的剩余使用次数
    remainingCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    const sys = uni.getSystemInfoSync()
    // 获取底部安全区域高度
    const safeAreaBottom = sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0
    
    // 获取平台信息
    const platform = sys.platform || ''
    const isIOS = platform === 'ios'
    const isAndroid = platform === 'android'
    
    // 检测是否是 tabbar 页面
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const route = currentPage.route || currentPage.__route__
    
    // tabbar 页面列表
    const tabbarPages = ['pages/index/index', 'pages/tactics/tactics', 'pages/data/index', 'pages/my/my']
    const isTabbarPage = tabbarPages.includes(route)
    
    // 计算 tabbar 高度
    let tabbarHeight = 0
    if (isTabbarPage) {
      // #ifdef APP-PLUS
      tabbarHeight = 50
      // #endif
      // #ifdef H5
      tabbarHeight = 50
      // #endif
      // #ifdef MP-WEIXIN
      tabbarHeight = 50
      // #endif
    }
    
    // 根据屏幕高度和设备信息动态计算额外偏移量
    // 这样可以适配不同尺寸的设备
    let platformOffset = 0
    if (isIOS) {
      // iOS 根据屏幕高度比例计算
      // 较新的 iPhone（带刘海）通常需要更多偏移
      const screenHeight = sys.screenHeight || 667
      const statusBarHeight = sys.statusBarHeight || 0
      
      // 如果有较大的 statusBarHeight（>20），说明是刘海屏或灵动岛设备
      if (statusBarHeight > 20) {
        // 刘海屏设备（iPhone X 及以后）
        platformOffset = Math.max(30, safeAreaBottom)
      } else if (screenHeight >= 812) {
        // 较大屏幕的旧设备
        platformOffset = 25
      } else {
        // 较小屏幕设备
        platformOffset = 20
      }
    } else if (isAndroid) {
      // Android 根据是否有虚拟导航栏决定
      // 如果有 safeAreaBottom，说明有虚拟导航栏
      if (safeAreaBottom > 0) {
        platformOffset = 10  // 有虚拟导航栏，需要少量偏移
      } else {
        platformOffset = 0   // 物理按键，不需要偏移
      }
    }
    
    console.log('ChatInput 初始化:', {
      route: route,
      platform: platform,
      isIOS: isIOS,
      isAndroid: isAndroid,
      isTabbarPage: isTabbarPage,
      screenHeight: sys.screenHeight,
      statusBarHeight: sys.statusBarHeight,
      safeAreaBottom: safeAreaBottom,
      tabbarHeight: tabbarHeight,
      platformOffset: platformOffset,
      deviceInfo: {
        model: sys.model,
        system: sys.system
      }
    })
    
    return {
      msg: '',           // 输入的消息
      focus: false,      // input是否聚焦
      keyboardVisible: false, // 键盘是否可见
      keyboardHeight: 0,      // 实际键盘高度
      safeAreaBottom: safeAreaBottom, // 底部安全区域高度
      tabbarHeight: tabbarHeight,     // tabbar 高度
      isTabbarPage: isTabbarPage,     // 是否是 tabbar 页面
      platform: platform,             // 平台标识
      isIOS: isIOS,                   // 是否是 iOS
      isAndroid: isAndroid,           // 是否是 Android
      platformOffset: platformOffset, // 平台额外偏移量（动态计算）
      screenHeight: sys.screenHeight, // 屏幕高度
      statusBarHeight: sys.statusBarHeight, // 状态栏高度
    }
  },
  computed: {
    // 是否可以发送
    sendEnabled() {
      return !this.disabled && this.msg.trim().length > 0
    },
    
    // 计算底部偏移（用于抵消 tabbar）
    bottomOffset() {
      if (this.isTabbarPage) {
        // tabbar 页面：使用负的 margin 抵消 tabbar 高度
        // 计算公式：tabbar高度 + 安全区域 + 平台额外偏移
        let offset = this.tabbarHeight + this.safeAreaBottom + this.platformOffset
        
        // 如果有实际的键盘高度，可以进行微调
        // 这是一个可选的优化，确保在不同键盘高度下都能正确显示
        if (this.keyboardHeight > 0 && this.keyboardVisible) {
          // 对于键盘高度异常的情况进行修正
          // 正常键盘高度通常在 250-350px 之间
          if (this.keyboardHeight < 200) {
            // 键盘太低，可能需要额外补偿
            offset += 10
          }
        }
        
        console.log('bottomOffset 计算:', {
          platform: this.platform,
          deviceModel: this.statusBarHeight > 20 ? '刘海屏' : '非刘海屏',
          tabbarHeight: this.tabbarHeight,
          safeAreaBottom: this.safeAreaBottom,
          platformOffset: this.platformOffset,
          keyboardHeight: this.keyboardHeight,
          totalOffset: offset
        })
        return `-${offset}px`
      }
      return '0px'
    },
    
    // 计算输入区域的底部内边距
    inputAreaPaddingBottom() {
      // 在 tabbar 页面上，需要添加安全区域的padding
      if (this.isTabbarPage) {
        return this.safeAreaBottom + 8 + 'px'
      }
      return '10rpx'
    }
  },
    
  mounted() {
    console.log('ChatInput mounted, bottomOffset:', this.bottomOffset)
  },
  methods: {
    /**
     * 更新键盘高度（由父组件调用）
     * @param {Object} res - 键盘高度信息
     */
    updateKeyboardHeightChange(res) {
      const height = res.height || 0
      console.log('键盘高度变化:', height, 'px')
      
      // 更新实际键盘高度
      this.keyboardHeight = height
      
      if (height > 0) {
        // 键盘展开
        this.keyboardVisible = true
        this.focus = true
        console.log('键盘已弹出，高度:', height, 'px，应用动态偏移')
      } else {
        // 键盘收起
        this.keyboardVisible = false
        this.keyboardHeight = 0
        this.focus = false
        console.log('键盘已收起，移除偏移')
      }
    },

    /**
     * 隐藏键盘（由父组件调用）
     */
    hidedKeyboard() {
      console.log('用户尝试隐藏键盘')
      this.keyboardVisible = false
      this.keyboardHeight = 0
      this.focus = false
    },

    /**
     * 输入框聚焦
     */
    onInputFocus(e) {
      console.log('输入框聚焦')
      this.$emit('focus', e)
    },

    /**
     * 输入框失焦
     */
    onInputBlur(e) {
      console.log('输入框失焦')
      this.$emit('blur', e)
    },

    /**
     * 点击发送按钮
     */
    sendClick() {
      if (!this.sendEnabled) return

      // 检查非VIP用户的使用次数
      if (!this.isVip && this.remainingCount <= 0) {
        uni.showToast({
          title: '使用次数已用完，请升级VIP',
          icon: 'none',
          duration: 2000
        })
        return
      }

      const message = this.msg.trim()

      // 发送消息事件
      this.$emit('send', message)

      // 立即清空输入框
      this.msg = ''

      // 强制更新视图
      this.$forceUpdate()
    },

    /**
     * 关闭币种选择器
     */
    closeCoinSelector() {
      this.$emit('close-coin-selector')
    },

    /**
     * 选择币种
     */
    selectPeriod(period) {
      this.$emit('select-period', period)
    },

    /**
     * 设置输入内容（由父组件调用）
     */
    setMessage(text) {
      this.msg = text
    },

    /**
     * 清空输入内容（由父组件调用）
     */
    clearMessage() {
      this.msg = ''
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-input-bar-container {
  position: relative;
  background-color: #fff;
  transition: margin-bottom 0.3s ease;
}

// 币种快捷按钮
.period-shortcuts {
  padding: 20rpx 30rpx 0;
  background: linear-gradient(135deg, #f8fcfb, #fff);
  border-radius: 24rpx 24rpx 0 0;
  animation: slideUp 0.3s ease;

  .shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16rpx;
    margin-bottom: 12rpx;
    border-bottom: 1rpx solid #e9ecef;

    .shortcuts-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #00d4aa;
    }

    .close-selector {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48rpx;
      height: 48rpx;
      cursor: pointer;
      border-radius: 50%;
      transition: all 0.3s;

      &:active {
        background-color: #f5f5f5;
      }
    }
  }

  .shortcuts-header-simple {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8rpx;
    margin-bottom: 8rpx;

    .close-selector-simple {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40rpx;
      height: 40rpx;
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: 50%;
      transition: all 0.3s;

      &:active {
        background-color: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
      }
    }
  }

  .shortcuts-scroll {
    width: 100%;
    white-space: nowrap;
    padding-bottom: 20rpx;
  }

  .shortcuts-grid {
    display: inline-flex;
    gap: 16rpx;

    .shortcut-btn {
      flex-shrink: 0;
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: #fff;
      border-radius: 50rpx;
      border: 2rpx solid #eee;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;

      &:active {
        background: linear-gradient(135deg, #00d4aa, #00c299);
        border-color: #00d4aa;
        transform: scale(0.95);

        .shortcut-text {
          color: #fff;
        }
      }

      .shortcut-text {
        font-size: 22rpx;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
      }
    }
  }
}

// 币种选择器滑入动画
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 输入区域
.input-area {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;

  .message-input {
    flex: 1;
    height: 88rpx;
    padding: 0 28rpx;
    margin-right: 24rpx;
    font-size: 28rpx;
    background: #f8f8f8;
    border: none;
    border-radius: 50rpx;
  }

  .input-placeholder {
    color: #adb5bd;
  }

  .send-btn {
    padding: 12rpx 36rpx;
    background: linear-gradient(135deg, #05cab6 0%, #04b89f 100%);
    border-radius: 50rpx;
    box-shadow: 0 2rpx 8rpx rgba(5, 202, 182, 0.3);
    transition: all 0.2s ease;

    &.disabled {
      background: #f5f5f5;
      opacity: 0.6;
      box-shadow: none;

      .send-text {
        color: #999;
      }
    }

    &:active:not(.disabled) {
      background: linear-gradient(135deg, #04b89f 0%, #039d88 100%);
      transform: scale(0.95);
      box-shadow: 0 2rpx 12rpx rgba(5, 202, 182, 0.4);
    }

    .send-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #fff;
    }
  }
}
</style>

